@()(implicit request: play.api.mvc.RequestHeader)
@main("Primer designer (Primer 3)") {
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>


	<style>

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}

			.form-horizontal .has-feedback .form-control-feedback {
				top: 0;
				right: -25px !important;
			}

			.has-feedback .form-control {
				padding-right: 10px;
			}

			.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
				padding-right: 0;
			}


			#fasta {
				display: none;
			}

			p {
				font-size: 16px;
			}

			.length {
				color: #3498db;
				width: 60px;
			}

			.blue {
				color: #3498db;
			}

			.orange {
				color: #f39c12;
			}

			td {
				font-size: 16px;
			}

			.table > thead > tr > th {
				border-bottom: none;
			}

			.table > tbody > tr > td {
				border-top: none;
			}

			.tableHead {
				background-color: #3498db;
				color: white;
				font-size: 16px;
			}

			.tableText {
				background-color: #F39C12;
				color: white;
			}

			.tableText:hover {
				background-color: #e08e0b;
			}

			.tableBorder {
				background-color: #F9F9F9;
			}

			.tableBorder:hover {
				background-color: #ECF0F1;
			}

			.tableNoBorder:hover {
				background-color: #ECF0F1;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Primer designer (Primer 3)</h2>
		</div>
	</div>

	<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

		<div class="form-group">
			<label class="control-label col-sm-2">Type of query:</label>
			<div class="col-sm-10" >
				<div class='radio' id='queryType'></div>
			</div>
		</div>

		<div class="eachMethod" id="range">

			<div class="form-group">
				<label class="control-label col-sm-2">Species:</label>
				<div class="col-sm-10" >
					<div class='radio' id='species'></div>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Chromosome:</label>
				<div class="col-sm-3">
					<select class="form-control chr" name="chr"></select>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Start position:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="start">
				</div>
				<label class="control-label col-sm-2">End position:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="end">
				</div>
			</div>

		</div>

		<div class="eachMethod" style="display: none" id="seq">

			<div class="form-group" >
				<label class="control-label col-sm-2">Enter FASTA sequences:</label>
				<div class="col-sm-8">
					<textarea class="form-control monospace" name="queryText" id="queryText" rows="7"
					></textarea>
					<span class="help-block">
						e.g.,&nbsp;<a href="javascript:void(0);"><em class="myShowExample" id="egQuery">
						example</em></a></span>
				</div>
			</div>

		</div>

		<div id="parameter">

			<h4>
				Parameter Selection:
			</h4>

			<div class="form-group">
				<label class="control-label col-sm-2">Sequence target:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="SEQUENCE_TARGET" value="50,350">
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Product Size Ranges:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="PRIMER_PRODUCT_SIZE_RANGE" value="100-300,300-600,600-1000">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Optimal primer size:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_OPT_SIZE" value="20">
				</div>
				<label class="control-label col-sm-2">Max primer size:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MAX_SIZE" value="25">
				</div>
				<label class="control-label col-sm-2">Min primer size:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MIN_SIZE" value="18">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Optimal primer TM:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_OPT_TM" value="59.0">
				</div>
				<label class="control-label col-sm-2">Max primer TM:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MAX_TM" value="62.0">
				</div>
				<label class="control-label col-sm-2">Min primer TM:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MIN_TM" value="57.0">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Optimal GC percent:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_OPT_GC_PERCENT" value="50.0">
				</div>
				<label class="control-label col-sm-2">Max GC percent:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MAX_GC" value="80.0">
				</div>
				<label class="control-label col-sm-2">Min GC percent:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MIN_GC" value="20.0">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Max #N&#x27;s accepted :</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MAX_NS_ACCEPTED" value="0">
				</div>
				<label class="control-label col-sm-2">Max Poly-X:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_MAX_POLY_X" value="10">
				</div>
				<label class="control-label col-sm-2">Max Internal Poly-X:</label>
				<div class="col-sm-1">
					<input class="form-control chr" name="PRIMER_INTERNAL_MAX_POLY_X" value="15">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Max Self Complementarity:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="PRIMER_MAX_SELF_ANY" value="45.0">
				</div>
				<label class="control-label col-sm-2">Max 3&#x27; Self Complementarity :</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="PRIMER_MAX_SELF_END" value="35.0">
				</div>
			</div>

			<div class="form-group ">
				<label class="control-label col-sm-2">Max Pair Complementarity:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="PRIMER_PAIR_MAX_COMPL_ANY" value="45.0">
				</div>
				<label class="control-label col-sm-2">Max 3&#x27; Pair Complementarity:</label>
				<div class="col-sm-3">
					<input class="form-control chr" name="PRIMER_PAIR_MAX_COMPL_END" value="35.0">
				</div>
			</div>

		</div>

		<div class="form-group">
			<div class="actions col-sm-offset-2 col-sm-2">
				<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search" >
					Run</button>
			</div>
		</div>


	</form>
	<hr>
	<div id="result" style="display: none;">
		<h4>Result:</h4>
		<h5>Fasta result:
			&nbsp;<button class="btn btn-primary myDownloadFa" ><i class="fa fa-download"></i>&nbsp;Download</button>
		</h5>
		<pre id="out" style="background-color: white"></pre>
		<div id="treeContent">
			<h5>Tree result:
				&nbsp;<button class="btn btn-primary myDownloadTree" ><i class="fa fa-download"></i>&nbsp;Download</button>
			</h5>
			<pre id="treeOut" style="background-color: white"></pre>
			<h5>Tree plot:
				<form action="@routes.ToolsController.downloadTree()" method="post" class="mySubmit" style="display: inline">
					<input type="hidden" name="svgHtml" id="svgHtml">
						&nbsp;<button class="btn btn-primary" type="submit"><i class="fa fa-download"></i>&nbsp;Download</button>
				</form>
			</h5>
			<div style="border: 1px solid #ccc;">
				<div>
					<div class="btn-group myGroup">
						<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="1" title="Expand vertical spacing">
							<i class="fa fa-arrows-v"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" data-direction="vertical" data-amount="-1" title="Compress vertical spacing">
							<i class="fa  fa-compress fa-rotate-135"></i>
						</button>
						<button id="leftRight" type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="1" title="Expand horizonal spacing">
							<i class="fa fa-arrows-h"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" data-direction="horizontal" data-amount="-1" title="Compress horizonal spacing">
							<i class="fa  fa-compress fa-rotate-45"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_ascending" title="Sort deepest clades to the bototm">
							<i class="fa fa-sort-amount-asc"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_descending" title="Sort deepsest clades to the top">
							<i class="fa fa-sort-amount-desc"></i>
						</button>
						<button type="button" class="btn btn-default btn-sm" id="sort_original" title="Restore original order">
							<i class="fa fa-sort"></i>
						</button>
					</div>
					<div class="btn-group myGroup" data-toggle="buttons">
						<label class="btn btn-default btn-sm active" id="linear">
							<input name="options" class="phylotree-layout-mode" data-mode="linear" autocomplete="off" checked="" title="Layout left-to-right" type="radio">
							Linear
						</label>
						<label class="btn btn-default  btn-sm">
							<input name="options" class="phylotree-layout-mode" data-mode="radial" autocomplete="off" title="Layout radially" type="radio">
							Radial
						</label>
					</div>
					<div class="btn-group myGroup" data-toggle="buttons">
						<label class="btn btn-default active btn-sm" id="defaultAlign">
							<input class="phylotree-align-toggler" data-align="left" name="options-align" autocomplete="off" checked="" title="Align tips labels to branches" type="radio">
							<i class="fa fa-align-left"></i>
						</label>
						<label class="btn btn-default btn-sm">
							<input class="phylotree-align-toggler" data-align="right" name="options-align" autocomplete="off" title="Align tips labels to the edge of the plot" type="radio">
							<i class="fa fa-align-right"></i>

						</label>
					</div>
				</div>

				<svg id="tree_display" xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
			</div>
		</div>
	</div>


	<script>

			$(function () {

				PrimerDesign.init

			})

	</script>
}
